﻿<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>TypeScript HTML App</title>
    <style>
        .canvas{
            height:500px;
            width:500px;
            border:1px solid black;
            position:relative;
        }
        .canvas div{
            height:20px;
            width:20px;
            background:url("yinghua.gif") no-repeat;
            position:absolute;
        }
        .menu{
            width:100px;
            height:50px;
            text-align:center;
            line-height:50px;
            position:relative;
        }
        .menu ul{
            padding:0;
            margin:0;
            width:100px;
            display:none;
            background-color:blue;
            position:absolute;
            left:0;
            top:51px;
            z-index:5;
        }
        .menu ul li{
            list-style-type:none;
            height:50px;

        }
        .menu:hover{
            background-color:red;
            cursor:pointer;
        }
        .menu ul li:hover{
            background-color:red;
            cursor:pointer;
        }
        .changeSpeed{
            height:200px;
            width:200px;
            border:2px solid #61baeb;
            background-color:#e6f1d7;
            position:fixed;
            margin:-100px 0 0 -100px; 
            left:50%;
            top:50%;
            text-align:center;
            display:none;
        }
    </style>
    <!--加入一个库-->
    <script src="lib.js" type="text/javascript"></script>
</head>
<body>
    <div class="menu" onmouseover="this.childNodes[1].style.display = 'block'; int = clearInterval(int);"
         onmouseout="this.childNodes[1].style.display = 'none';">
        菜单
        <ul>
            <li onclick="opendialog()">修改速度</li>
        </ul>
    </div>

    <div class="changeSpeed" id="changeSpeed">
        <h3>请输入速度</h3>
        <div>
            <input type="text" id="speedInto" value="500" style="padding:5px;"/>
            <input type="submit" value="提交" onclick="dialogSubmit()" style="margin:10px 0 0 0;background-color:#a3efba" />
            <input type="button" value="取消" onclick="dialogClose()" style="margin:10px 0 0 0;background-color:#a3efba" />
        </div>
    </div>
    <div id="canvas" class="canvas">
        <div></div>
        <div></div>
        <div></div>
    </div>
    

    <p>c为重置键,上下左右方向键，p暂停,q开始</p>
    <script type="text/javascript">
        var canvasHD = document.getElementById("canvas");
        var snake = [];   //尾部0,1,2头部

        var snake_length = 0;
        //alert(canvasHD.childNodes.length);

        //(x,y)
        var head = [,];
        var tail = [, ];

        var fruit = [, ];

        var newNodes = [];
        //蛇身定位
        var point = 0;
        var direct = "right";
        var fruitHD = null;

        var dieFlag = null;

        var speed = 500;

        function changeSnake() {
            for (var i in snake) {
                snake[i].style.background
            }
        }
        //打开更改速度的界面
        function opendialog() {
            var csHD = document.getElementById("changeSpeed");
            csHD.style.display = "block";
            int = clearInterval(int);
        }

        function dialogClose() {
            var csHD = document.getElementById("changeSpeed");
            csHD.style.display = "none";
            int = setInterval("toChange()", speed);
        }

        function dialogSubmit() {
            var csHD = document.getElementById("changeSpeed");
            var speedIntoHD = document.getElementById("speedInto");
            speed = speedIntoHD.value;
            //alert(speed);
            csHD.style.display = "none";
            int = setInterval("toChange()", speed);

        }

        function createFruit() {
            fruit = [randomInt(20 * (snake_length - 1), 500 - 20 * (snake_length + 1), 20), randomInt(1, 479, 20)];
            fruitHD = document.createElement("div");
            fruitHD.style.height = "20px";
            fruitHD.style.width = "20px";
            fruitHD.style.position = "absolute";
            fruitHD.style.left = fruit[0] + "px";
            fruitHD.style.top = fruit[1] + "px";
            canvasHD.appendChild(fruitHD);
        }
        function createNode() {
            var newNode = document.createElement("div");
            newNode.style.height = "20px";
            newNode.style.width = "20px";
            newNode.style.position = "absolute";
            canvasHD.appendChild(newNode);
            if (direct == "right") {
                head[0] += 20;
            }
            else if (direct == "up") {
                head[1] -= 20;
            }
            else if (direct == "left") {
                head[0] -= 20;
            }
            else if (direct == "down") {
                head[1] += 20;
            }
            newNode.style.left = head[0] + "px";
            newNode.style.top = head[1] + "px";
            snake.push(newNode);
            newNodes.push(newNode);
        }
        


        function deleteNodes() {
            for (var i in newNodes) {
                //alert(newNodes);
                canvasHD.removeChild(newNodes[i]);
                //newNodes.pop();
            }
            newNodes = [];
        }
        function deleteFruit() {
            if (fruitHD) {
                canvasHD.removeChild(fruitHD);
                fruitHD = null;
            }
        }

        //初始化或重置
        function start() {
            dieFlag = null;
            //alert(snake + "+++" + newNodes);
            deleteNodes();
            deleteFruit();
            snake = [];
            speed = 500;
            for (var i in canvasHD.childNodes) {
                if (i % 2 == 1) {
                    snake.push(canvasHD.childNodes[i]);//收集所有蛇身
                }
            }
            
            snake_length = snake.length;
            head = [randomInt(20 * (snake_length - 1), 500 - 20 * (snake_length+1),20), randomInt(1, 479,20)];
            tail = [head[0] - (20 * (snake_length - 1)), head[1]];

            
            createFruit();
            point = snake.length-1;

            while (true) {
                snake[point].style.left = head[0] + point * 20+ "px";
                snake[point].style.top = head[1] + "px";
                //alert([snake[point].style.left, snake[point].style.top]+"++++"+ head+"+++"+point);
                if (point == 0 ) {
                    break;
                }
                point--;
            }
            

        }

        //初始化
        window.onload = start();
        //移动
        function toChange() {
            if (direct == "right") {
                head[0] += 20;
            }
            else if(direct=="up"){
                head[1] -= 20;
            }
            else if (direct == "left") {
                head[0] -= 20;
            }
            else if (direct == "down") {
                head[1] += 20;
            }
            //判定死亡
            
            //alert(fruit+"++++"+head+"+++"+(fruit==head));
            if (fruit[0] == head[0] && fruit[1] == head[1]) {
                
                createNode();
                deleteFruit();
                createFruit();
            }
            
            dieFlag = die();
            if (dieFlag == "die") {
                console.log(newNodes);
                alert("你死了");
                start();
                return;
            }

            snake[0].style.left = head[0] + "px";
            snake[0].style.top = head[1] + "px";
            snake.push(snake[0]);
            snake.shift();
            tail[0] = snake[0].style.left;
            tail[1] = snake[0].style.top;

            //吃果实
        }

        //死亡判定
        function die() {
            if (head[0] >= 500 || head[0] < 0 || head[1] >= 500 || head[1] <0) {
                return "die";
            }
            for (var i in snake) {
                //alert([snake[i].style.left, snake[i].style.top]+"+++++"+head);
                if (i == snake.length - 2) {
                    return;
                }
                if (snake[i].style.left.replace("px", "") == head[0] && snake[i].style.top.replace("px", "") == head[1]) {
                    return "die";
                }
            }

        }
        //int = setInterval("toChange()", speed);
        //setInterval("die()", 10);
        //c为重置键
        window.onkeydown = function (e) {
            e = e.keyCode;
            switch (e) {
                case 37:  //←
                    if (direct != "right") {
                        direct = "left";
                    }
                    break;
                case 38:  //↑
                    if (direct != "down") {
                        direct = "up";
                    }
                    break;
                case 39:  //→
                    if (direct != "left") {
                        direct = "right";
                    }
                    break;
                case 40:  //↓
                    if (direct != "up") {
                        direct = "down";
                    }
                    break;

                case 67:  //c
                    start();
                    break;

                case 80:  //p
                    int=clearInterval(int);
                    break;
                case 81:   //q
                    int = setInterval("toChange()", speed);
                	break;
            }
        }
    </script>
</body>
</html>
